<template>
	<view class="index-top">
		<view class="search">
			<text class="leftName">
				<view class="">
					林芝
				</view>
				<view class="">
					（测试版）
				</view>
			</text>
			<!-- <text class="leftName">林芝文化馆</text> -->
			<u-search placeholder="搜索产品或者名称" v-model="keyword" @clear="clearSearch" @search="handleSearch"
				:clearabled="true" :showAction="false"></u-search>

			<view class="" style="display: flex;align-items: center;margin-left: 10rpx;font-size: 26rpx;">
				<vvSelect :list="rightList" label="name" valueKey="id" placeholder-style="color: #F5F5F5" ref="vvSelect"
					@change="tabChange" :placeholder="rightText" :font="26"></vvSelect>
				<view class="" style="margin-left: 6rpx;">
					<u-icon name="arrow-down" size="14"></u-icon>
				</view>
			</view>
		</view>
		<view class="banner">
			<u-swiper :list="list" height="160" radius="10"></u-swiper>
		</view>
		<view class="menu">
			<view class="item" v-for="i in menuList" :key="i.id" @tap.stop="Jump(i.url)">
				<image :src="i.icon" mode="widthFix" class="image"></image>
				<text>{{i.name}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import vvSelect from '@/components/vv-select/index.vue'
	import {
		banner
	} from "@/request/homeApi.js"
	export default {
		components: {
			vvSelect
		},
		data() {
			return {
				keyword: '',
				list: [],
				rightText: '分类',
				type: null,
				menuList: [{
						id: 1,
						name: '学才艺',
						icon: '../../static/index/1.png',
						url: '/pages/tabBar/learning'
					},
					{
						id: 2,
						name: '享活动',
						icon: '../../static/index/5.png',
						url: '/pages/tabBar/shareActive'
					},
					{
						id: 3,
						name: '赶大集',
						icon: '../../static/index/3.png',
						url: '/pages/home/order'
					},
					{
						id: 4,
						name: '读好书',
						icon: '../../static/index/2.png',
						url: '/pages/home/reading'
					},
					{
						id: 5,
						name: '游林芝',
						icon: '../../static/index/6.png',
						url: '/pages/home/swimIndex'
					},
					{
						id: 6,
						name: '订场馆',
						icon: '../../static/index/4.png',
						url: '/pages/tabBar/stadium'
					}
				],
				rightList: [{
						id: 1,
						name: '学才艺',
						url: '/pages/tabBar/learning'
					},
					{
						id: 2,
						name: '享活动',
						url: '/pages/tabBar/shareActive'
					},
					{
						id: 3,
						name: '赶大集',
						url: '/pages/home/order'
					},
					{
						id: 4,
						name: '游林芝',
						url: '/pages/home/swimIndex'
					},
					{
						id: 5,
						name: '订场馆',
						url: '/pages/tabBar/stadium'
					},
					{
						id: 6,
						name: '汇资讯',
						url: '/pages/home/dietIndex'
					},
					{
						id: 7,
						name: '品非遗',
						url: '/pages/home/heritage'
					},
					{
						id: 8,
						name: '看直播',
						url: '/pages/home/living'
					}
				]
			}
		},
		methods: {
			// 搜索
			handleSearch() {
				if (this.type) {
					let path = this.rightList[this.type - 1].url
					if (path.indexOf('tabBar', 0) == -1) {
						uni.navigateTo({
							url: `${path}?title=` + this.keyword
						})
					} else {
						uni.setStorageSync('title', this.keyword)
						uni.switchTab({
							url: path
						})

					}

				} else {
					uni.showToast({
						title: '请选择分类',
						icon: 'none'
					})
				}

			},
			clearSearch() {
				this.keyword = ''
			},
			// 类型切换
			tabChange(e) {
				this.type = e
			},
			// 首页轮播
			getBanner() {
				this.keyword = ''
				this.type = ''
				this.$refs.vvSelect.emptCheckLabels()
				uni.removeStorageSync('title')
				let that = this
				banner().then(res => {
					that.list = that.arrToObj(res.data)
				});
			},
			// 数组取值
			arrToObj(arr) {
				let obj = []
				let that = this
				arr.forEach((item, index) => {
					obj[index] = that.$imageOss(item.images)
				})
				return obj
			},
			Jump(url) {
				if (url.indexOf("tabBar") == -1) {
					uni.navigateTo({
						url: url
					})
				} else {
					uni.switchTab({
						url: url
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index-top {
		padding: 20px;
		background-color: #ffffff;

		.menu {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.item {
				color: #313131;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: 25rpx;
				height: 90rpx;

				.image {
					width: 40rpx;
					margin: auto;
				}
			}
		}

		.search {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.leftName {
				margin-right: 30rpx;
				font-family: PingFang SC;
				font-size: 14px;
				font-weight: 400;
				line-height: 20px;
				letter-spacing: 0px;
				text-align: center;
				font-weight: 600;

			}
		}

		.banner {
			margin: 20rpx 0;
		}
	}
</style>